<template>
  <div class="collection-main-box" v-loading="loading">
    <ul class="collection-article">
      <li class="collection-article-box" v-for="(item,index) in info" :key="index">
        <div class="collection-article-author">
          <img @click="$router.push('/homePage?id=' + item.article.user.id)" :src="item.article.user.header_image" alt="" class="collection-article-author-img">
          <span @click="$router.push('/homePage?id=' + item.article.user.id)" class="collection-article-author-name">{{item.article.user.nickname}}</span>
          <span class="collection-article-author-add-time">{{item.article.add_time}}</span>
        </div>
        <span @click="$router.push('/article?id=' + item.article.id)"  class="collection-article-title">{{item.article.title}}</span>
        <span class="collection-article-content">{{item.article.desc}}</span>
        <img @click="$router.push('/article?id=' + item.article.id)"  :src="item.article.cover_image" class="collection-article-img" alt="" v-if="showImg">
        <div class="collection-article-detail">
          <span class="collection-article-view"><i class="iconfont icon-yanjing"></i>{{item.article.click_number}}</span>
          <span class="collection-article-comment"><i class="iconfont icon-pinglun"></i>{{item.article.comment_number}}</span>
          <span class="collection-article-like"><i class="iconfont icon-favour-full"></i>{{item.article.like_number}}</span>
        </div>
        <div class="collection-article-divider"></div>
      </li>
    </ul>

    <div style="text-align: right">
      <el-pagination
        class="collection-pages"
        background
        layout="prev, pager, next"
        :total="collectionCount"
        v-if="collectionCount"
        @current-change="changePage"
        :page-size="5">
      </el-pagination>
    </div>

    <NoData v-if="collectionCount===0" :tip="tip" />
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {getArticleCollection} from "../../api/operation";
  import NoData from '../../components/noData'

  export default {
    name: "index",
    computed:{
      ...mapState('base', {
        showImg: state => state.showImg
      })
    },
    components:{
      NoData
    },
    data(){
      return{
        info:{},
        loading:false,
        collectionCount:0,
        tip:'你还没有收藏的文章哦',
      }
    },
    created(){
      this.loading=true;
      this.getArticleList()
    },
    methods:{
      //拉取收藏文章列表
      getArticleList(){
        getArticleCollection('?ordering=-add_time').then(res=>{
          this.collectionCount=res.data.count;
          this.info=res.data.results;
          this.loading=false;
        }).catch(error=>{
          this.loading=false;
        })
      },
      changePage(now){
        this.loading=true;
        getArticleCollection('?page=' + now + '&ordering=-add_time').then(res=>{
          this.info=res.data.results;
          this.collectionCount=res.data.count;
          this.loading=false;
          console.log(res.data);
        }).catch(error=>{
          this.loading=false;
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../stylus/color.styl"

  .collection-main-box{
    max-width 600px!important
    margin 0 auto
    width 100%
  }

  //文章列表
  .collection-article{
    list-style none
    padding 0
    margin 0
  }
  .collection-article-box{
    position relative
    max-width 600px
    margin 0 auto
  }
  .collection-article-img{
    width 150px
    height 100px
    position absolute
    border-radius 6px
    border 1px solid $color-border
    right 0
    top 50%
    margin-top -51px
    cursor pointer
  }
  .collection-article-title{
    font-size 16px
    color $color-sub
    font-weight 700
    display block
    margin-bottom 7px
    cursor pointer
    padding-top 14px
  }
  .collection-article-title:hover{
    text-decoration underline
  }
  .collection-article-author{
    width 100%
    height 26px
    line-height 26px
    margin-top 16px
  }
  .collection-pages{
    margin-top 20px
    margin-bottom 30px
  }
  .collection-article-author-name:hover{
    color $color-content
  }
  .collection-article-author-add-time{
    font-size 12px
    color $color-gray
  }
  .collection-article-content{
    font-size 13px
    color $color-gray
    max-width 430px
    display block
    margin-bottom 7px
  }
  .collection-article-detail{
    padding-bottom 14px
  }
  .collection-article-author-img{
    width 24px
    height 24px
    border 1px solid $color-border
    cursor pointer
    border-radius 12px
  }
  .collection-article-author-name{
    font-size 13px
    color $color-content
    display inline-block
    margin-right 7px
    cursor pointer
  }
  .collection-article-view{
    font-size 12px
    color $color-gray
    margin-right 7px
  }
  .collection-article-comment{
    font-size 12px
    color $color-gray
    display inline-block
    margin-right 7px
  }
  .collection-article-like{
    font-size 12px
    color $color-gray
  }
  .collection-article-divider{
    width: 100%;
    height: 1px;
    background-color: $color-divider;
    max-width 600px
    margin 0 auto
  }
  .icon-yanjing{
    font-size 10px
    margin-right 2px
  }
  .icon-pinglun{
    font-size 10px
    margin-right 2px
  }
  .icon-favour-full{
    font-size 11px
    margin-right 2px
  }

  //没有数据的css
  .collection-no-data-box{
    text-align center
  }
  .collection-no-data-img{
    width 100%
    max-width 400px
    height auto
    margin-top 20%
  }
  .collection-no-data-text{
    display block
    margin-top 30px
    font-weight 700
    font-size 22px
    color $color-content
  }
</style>
